<template>
	<view style="overflow-y: auto;">
		<view class="condition">
			<view class="conmenus">
				<view class="conleft">{{$t('defect.common.defectNo')}}</view>
				<view class="conright">
					<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="form.dfNo"/>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.common.defectCom')}}</view>
				<view class="conright">
					<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="form.dfDesp"/>
				</view>
			</view>
			<view class="conmenus" v-if="projectType == 'wind'">
				<view class="conleft">{{$t('common.field.deptAlias')}}</view>
				<view class="conright">
					<data-picker v-model="form.operationTeamNo" :range="czOptions"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.common.defectState')}}</view>
				<view class="conright">
					<data-picker v-model="form.state" :range="stateOptions"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.common.defectLev')}}</view>
				<view class="conright">
					<data-picker v-model="form.dfLevelNo" :range="levelOptions"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.defInfo.dfType')}}</view>
				<view class="conright">
					<data-picker v-model="form.dfType" :range="typeOptions"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.defInfo.mtnTeamName')}}</view>
				<view class="conright">
					<data-picker v-model="form.mtnTeamNo" :range="teamOptions"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('baseCommon.other.skillNo')}}</view>
				<view class="conright">
					<data-picker v-model="form.skillNo" :range="skillOptions"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.defInfo.disTime')}}</view>
				<view class="conright moreright">
					<date-picker :showValue="form.findStartDate" @change="dateChange($event, 'findStartDate')">
						{{ form.findStartDate || $t('baseCommon.message.pleaseSelect', { title: '' }) }}
					</date-picker>
					<view class="separator">-</view>
					<date-picker :showValue="form.findEndDate" @change="dateChange($event, 'findEndDate')">
						{{ form.findEndDate || $t('baseCommon.message.pleaseSelect', { title: '' }) }}
					</date-picker>
				</view>
			</view>
		</view>
		
		<view class="button-groups">
			<button type="primary" @click="onQuery">{{$t('baseCommon.buttons.search')}}</button>
			<button type="default" @click="onReset">{{$t('baseCommon.buttons.reset')}}</button>
		</view>
	</view>
</template>

<script>
	import { findByTypeKeyExtend } from '@/api/platform/common.js'
	import { getDefectLevel } from '@/api/business/defect.js'
	import { utilities } from '@/utils/common.js'
	
	export default {
		data() {
			return {
				form: {
					dfNo: "",
					dfDesp: "",
					dfType: "",
					dfLevelNo: "",
					state: "",
					skillNo: "",
					findStartDate: '',
					findEndDate: '',
					findDateStr: "",
					mtnTeamNo: "",
					operationTeamNo: ""
				},
				typeOptions: [],
				levelOptions: [],
				stateOptions: [],
				skillOptions: [],
				teamOptions: [],
				czOptions: [],
				dateRange: [],
				projectType: ''
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData() {
				this.projectType = uni.getStorageSync("projectType")
				
				// 场站
				this.czOptions = []
				uni.getStorageSync("stationList").forEach(item=>{
					this.czOptions.push({
						value: item.id,
						label: item.name
					})
				})
				
				// 班组
				this.teamOptions = []
				uni.getStorageSync("teamList").forEach(item=>{
					this.teamOptions.push({
						value: item.id,
						label: item.name
					})
				})
				
				// 缺陷等级
				this.levelOptions = []
				getDefectLevel().then(res => {
					const _this = this
					for (const [key, value] of Object.entries(res.data)) {
						_this.levelOptions.push({
							value: key,
							label: value
						})
					}
				})
				
				// 数据字典（专业，状态，缺陷类型）
				findByTypeKeyExtend("zybm,qxywzt,qxlx").then(res=>{
					if(res.data) {
						if(res.data.zybm) {
							res.data.zybm.forEach(item=>{
								this.skillOptions.push({
									value: item.key,
									label: item.name
								})
							})
						}
						
						if(res.data.qxywzt) {
							res.data.qxywzt.forEach(item=>{
								this.stateOptions.push({
									value: item.key,
									label: item.name
								})
							})
						}
						
						if(res.data.qxlx) {
							res.data.qxlx.forEach(item=>{
								this.typeOptions.push({
									value: item.key,
									label: item.name
								})
							})
						}
					}
				})
			},
			dateChange(e, attr) {
				this.form[attr] = e
			},
			onQuery() {
				if(this.form.findStartDate && this.form.findEndDate){
					this.form.findDateStr = this.form.findStartDate + "," + this.form.findEndDate
				}
				
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('eventData', this.form);
				uni.navigateBack()
			},
			onReset() {
				Object.keys(this.form).forEach(key=>{
					this.form[key] = ""
				})
				this.dateRange = []
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-detail.scss';
	
	.moreright {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.separator {
		margin: 0 4px;
	}
</style>
